<template>
  <div class="_wz_hiddenTroubleListAdd">
    <div style="padding: 10px 0 0 0;">
      <Form ref="formAdd" :model="formData" label-position="right" :label-width="100" :rules="ruleValidate">
        <FormItem label="运输企业" prop="deptUuid">
          <i-select v-model="formData.deptUuid" filterable placeholder="请选择运输企业"  :label-in-value="true" clearable @on-change="public.selectName($event,formData,'deptName')">
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="排查清单" prop="riskPointName">
          <i-input v-model="formData.riskPointName" placeholder="请填写排查清单" clearable />
        </FormItem>
        <FormItem label="排查人员" prop="riskPointPerson">
          <i-input v-model="formData.riskPointPerson" placeholder="请填写排查人员" clearable />
        </FormItem>
        <FormItem label="排查类型" prop="riskPointTypeCode">
          <i-select v-model="formData.riskPointTypeCode" filterable placeholder="请选择检查项类型"   :label-in-value="true" clearable @on-change="public.selectName($event,formData,'riskPointTypeName')">
            <Option v-for="item in pcType" :value="item.code" :key="item.value">{{ item.value }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="排查周期" prop="riskPointCycle">
          <i-select v-model.number="formData.riskPointCycle" filterable placeholder="请选择排查周期" clearable>
            <Option :value="1">每天</Option>
            <Option :value="2">每周</Option>
            <Option :value="3">每旬</Option>
            <Option :value="4">每月</Option>
            <Option :value="5">每季</Option>
            <Option :value="0">不限</Option>
          </i-select>
        </FormItem>
      </Form>
    </div>


    <div class="demo-drawer-footer" style="z-index: 99;">
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
      <Button type="primary" @click="addSubmit('formAdd')">提交</Button>
    </div>

    <Spin size="large" fix v-if="spinShow"></Spin>

  </div>
</template>
<script>
export default {
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {
      spinShow: false,//本页加载
      pcType:[],
      ruleValidate: {//正则
        riskPointPerson: [
          {required: true, message: '请填写排查人员', trigger: 'blur'}
        ],
        deptUuid: [
          {required: true, message: '请选择运输企业', trigger: 'blur'}
        ],
        riskPointName: [
          {required: true, message: '请填写排查清单', trigger: 'blur'}
        ],
        riskPointTypeCode: [
          {required: true, message: '请选择检查项类型', trigger: 'blur'}
        ],
        riskPointCycle: [
          {type:'number',required: true, message: '请选择排查周期', trigger: 'blur'}
        ],
      },
      subDeptList: [],//运输企业
      formData: {},
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    that.formData = that.selectData;

    //排查类型
    that.axios.post(that.apiUrl.systemDictSystemDictList, {type: 'risk_point_type'}).then(res => {
      if (!!res) {
        that.pcType = res.data.data;//返回数据
      }
    }).catch(err => {
      console.log("失败", err)
    })

    //运输企业
    that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
      if (!!res) {
        that.subDeptList = res.data.data;
        if(!that.selectData.id){
          that.formData.deptUuid = that.subDeptList[0].uuid;
          that.formData.deptName = that.subDeptList[0].deptName;
        }
      }
    }).catch(err => {
      console.log("失败", err)
    })


  },
  methods: {//执行的方法
    //提交表单
    addSubmit(name) {
      let that = this;
      that.$refs[name].validate((valid) => {
        if (valid) {//正则判断使用
          that.$Spin.show();
          that.axios.post(that.apiUrl.webApi + "/safety/risk/riskPointSaveOrUpdate", that.formData).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success("保存成功");
              that.$emit("closeFun", true)
            }
          }).catch(err => {
            console.log('失败', err);
          })

        } else {
          this.$Message.error('请正确填写表单');
        }
      })
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_hiddenTroubleListAdd {
  overflow: auto;
  height: 100%;

  .demo-upload-list {
    display: inline-block;
    width: 120px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .2);
    margin-right: 4px;

    img {
      width: 100%;
      height: 100%;
    }

    .demo-upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, .6);

      i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
      }
    }
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }
}
</style>
